<template>
  <el-form-item :label="label" :prop="prop">
    <el-select
      v-model="selectedVal"
      clearable
      filterable
      :placeholder="placeholder"
      @change="change"
    >
      <el-option
        v-for="item in enumDicOptions"
        :key="item.eddId"
        :label="item.edValue"
        :value="item.eddId"
      />
    </el-select>
  </el-form-item>

</template>

<script>
import { listEnumDicSelects } from '@/api/sys_manage/enumDic/enumDic'// api方法
export default {
  name: 'EnumDicSelects',
  props: {
    edCode: {
      type: String,
      required: true // 必须传递
    },
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedVal: '',
      enumDicOptions: []
    }
  },
  watch: {
    value() { // value改变时，内部选中的值也跟着改变
      this.selectedVal = this.value
    }
  },
  mounted() {
    listEnumDicSelects(this.edCode).then(res => {
      if (res.data.length > 0) {
        this.enumDicOptions = res.data
        this.selectedVal = this.value
      }
    })
  },
  methods: {
    change() {
      // 调用父方法，给输入框传值
      this.$emit('input', this.selectedVal)
      const d = this.enumDicOptions.find(item => {
        if (item.eddId === this.selectedVal) {
          return true
        }
      })
      this.$emit('change', d.edValue)
    }
  }
}
</script>

<style scoped>
  .el-select-dropdown.el-popper{
    width: 206px;
  }

</style>
